/**
 * 標籤頁控件
 * @author Ly
 * @version 1.0a
 */
/**
 * Ly.TabPanel構造函數
 * @param {Object} container 承載控件的容器對象
 * @param {Object} config 控件的配置信息
 * config = {
     width : '100%',
     height : '100%',
     themes : 'default',
     baseCls : 'ly-tabpanel',
	 swapType : 'click',		// 切換方式，單擊click/移動鼠標move
     initAllTabs : false,		// 是否初始化所有標籤，默認false
	 events : {
         onclick : function(obj) {
         }
     },
     items : [{
        name : '标签一',
        html : '内容',
        load : 'a.html',
        reload : false,
        events : {
            ondblclick : function(obj) {
                obj.close();
            }
        }
    }]
 }
 */
Ly.TabPanel = function(container, config ) {
    config      = config || {};
    var _this   = this;
    this.config = {
        container    : container || document.body,
		iframeHeight : '100%',		// 框架的高度，初始化時就計算好此高度值。
        width        : config.width || '100%',
        height       : config.height || '100%',
        themes       : config.themes || 'default',
        baseCls      : config.baseCls || 'ly-tabpanel',
		swapType     : config.swapType || 'click',
		initAllTabs  : !!config.initAllTabs,
        items        : function() {
            items = config.items || [];
            if (items.constructor != Array) {
                alert('标签项是由JSON数据组成的数组！');
            }
            return items;
        }(),
        events       : config.events || {},
        tabs         : [],
        objList      : {}
    };
    this.private = {
        /**
         * 初始化标签框架
         */
        initTabPanel : function() {
            var c = _this.config,
                w = function() {
                    if (c.width == '100%') {
                        //return c.container.clientWidth - 20;
                    }
                    return c.width;
                }(),
                h = function() {
                    if (c.height == '100%') {
                        //return c.container.clientHeight - 30;
                    }
                    return c.height;
                }(),
				table = Ly.createElement('table', {
					border : 0,
					width : w,
					height : h,
					cls : c.baseCls
				});
			
			c.objList.container = Ly.createElement('tbody');
            
            c.objList.titleBar  = Ly.createElement('tr');
            c.objList.spaceBar  = Ly.createElement('tr');
            c.objList.content   = Ly.createElement('tr');
			
			table.appendChild(c.objList.container);
            c.container.appendChild(table);
			table.cellSpacing = 0;
			table.ceelPadding = 0;
            
            // 添加tr區域
            c.objList.container.appendChild(c.objList.titleBar);
            c.objList.container.appendChild(c.objList.spaceBar);
            c.objList.container.appendChild(c.objList.content);
            c.objList.container.appendChild(Ly.createElement('tr'));    // 多添加一行用于自动调整大小
            
            c.objList.titleBar.appendChild(Ly.createElement('td', { cls : 'ly-tabpanel-tab-last', innerHTML : '&nbsp' }));
            c.objList.spaceBar.appendChild(Ly.createElement('td', { cls : 'ly-tabpanel-spacebar', colspan : '1', innerHTML : '&nbsp;' }));
            c.objList.content.appendChild(Ly.createElement('td', { cls : 'ly-tabpanel-content', colspan : '1' }));
            
			c.iframeHeight = c.objList.container.parentNode.clientHeight - 31;
            Ly.setHeight(c.objList.content.firstChild, c.objList.container.parentNode, 31);
        }(),
        /**
         * 初始化標籤事件
         * @param {Object} config 标签的配置信息.
         */
        initTabPanelEvent : function(tab, config) {
            var c      = _this.config,
				events = config.events || {};
            
            // 注册公共事件
			
			if (config.closeButton) {
				Ly.addEvent('onclick', function(obj, event) {
					event = window.event || event;
					
					if (event.stopPropagation) {
						event.stopPropagation();
					} else {
						event.cancelBubble = true;
					}
					
					_this.private.remove(tab);
					config.closeTabHandler.call(tab);
				}, tab.lastChild);
				Ly.addEvent('onmouseover', function(obj, event) {
					event = window.event || event;
					
					if (event.stopPropagation) {
						event.stopPropagation();
					} else {
						event.cancelBubble = true;
					}
					this.className += ' ly-tabpanel-closebutton-mouseover';
				}, tab.lastChild);
				Ly.addEvent('onmouseout', function(obj, event) {
					event = window.event || event;
					
					if (event.stopPropagation) {
						event.stopPropagation();
					} else {
						event.cancelBubble = true;
					}
					this.className = this.className.split(' ').shift();
				}, tab.lastChild);
			}
			
			if (c.swapType.toLowerCase() == 'click') {
				Ly.addEvent('onclick', this.swapTabs, tab);
			} else {
				Ly.addEvent('onmouseover', this.swapTabs, tab);
			}
			for (var p in c.events) {
				Ly.addEvent(p, c.events[p], tab);
			}
            
            //注册私有事件
            for (var p in events) {
                Ly.addEvent(p, events[p], tab);
            }
        },
        /**
         * 切换标签
         * @param {Object} tab 要选中的标签
         */
        swapTabs : function(tab) {
              var tabs = _this.config.tabs;
              if (tab.className == 'ly-tabpanel-tab-selected') {
                  return;
              }
              
              for (var i = 0; i < tabs.length; i++) {
                  if (tabs[i].tab === tab) {
                      tabs[i].tab.className = 'ly-tabpanel-tab-selected';
                      tabs[i].content.style.display = 'block';
					  
					  // 第一次打開標籤,則給IFRAME設置SRC
					  if (!!tabs[i].path && !tabs[i].loaded && !tabs[i].preload) {
						  tabs[i].iframe && (tabs[i].iframe.src = tabs[i].path);
						  tabs[i].loaded = true;
					  }
                      // 是否要重新加載此標籤內容
                      if (tabs[i].reload && tabs[i].iframe) {
                          tabs[i].iframe.src = tabs[i].path;
                      }
                  } else {
                      tabs[i].tab.className = 'ly-tabpanel-tab';
                      tabs[i].content.style.display = 'none';
                  }
              }
        },
        /**
         * 判断标签是否存在
         * @param {Object} 要判断的标签对象
         * @return {Botrean} true/false
         */
        isExist : function(tab) {
            var tabs = _this.config.tabs;
            for (var i = 0; i < tabs.length; i++) {
                if (tabs[i].tab === tab) {
                    return true;
                }
            }
            return false;
        },
		getWidth : function(flag) {
			var tds = _this.config.objList.titleBar.childNodes,
				width = 0;
			
			flag = flag || 0;
			for (var i = 0, len = tds.length - 1 - flag; i < len; ++i) {
				if (tds[i].firstChild.nodeType == 1) {
					width += tds[i].clientWidth + 4;
				} else {
					width += tds[i].clientWidth + 3;
				}
			}
			
			return width;
		},
        /**
         * 添加标签页
         * @param {Object} config 标签项配置信息
         * @return {Object} 新创建的标签对象
         */
        add : function(config) {
            var iframe,
				iframeSrc = '/blank.html',
				loaded    = false,	// 當前標籤的IFRAME是否已經加載
                c         = _this.config,
                tr        = c.objList.titleBar,
                ref       = config.reference,
                position  = config.position,
                reference = config.reference,
                tdSpace   = Ly.createElement('td', { cls : 'ly-tabpanel-title-space' }),
                td        = Ly.createElement('td'),
                content   = Ly.createElement('div');
            
            tdSpace.innerHTML = '&nbsp;';
			
            td.innerHTML = '<div class="ly-tabpanel-title">' + config.name + '</div>';
            
			if (config.closeButton) {
				td.innerHTML += '<div class="ly-tabpanel-closebutton"></div>';
			}
			
            switch (position) {
                case 'first':
                    tr.insertBefore(tdSpace, tr.firstChild);
                    tr.insertBefore(li, tr.firstChild.nextSibling);
                    break;
                case 'before':
                    if (ref && this.isExist(ref)) {
                        tr.insertBefore(tdSpace, ref);
                        tr.insertBefore(td, ref.nextSibling);
                    } else {
                        tr.insertBefore(tdSpace, tr.lastChild);
                        tr.insertBefore(td, tr.lastChild);
                    }
                    break;
                case 'after':
                    if (ref && this.isExist(ref) && isExist(ref.nextSibling)) {
                        tr.insertBefore(tdSpace, ref.nextSibling);
                        tr.insertBefore(li, ref.nextSibling.nextSibling);
                    } else {
                        tr.insertBefore(tdSpace, tr.lastChild);
                        tr.insertBefore(td, tr.lastChild);
                    }
                    break;
                case 'last':
                    tr.insertBefore(tdSpace, tr.lastChild);
                    tr.insertBefore(td, tr.lastChild);
            }
			
            if (config.state == 'open') {
                td.className          = 'ly-tabpanel-tab-selected';
                content.style.display = '';
				iframeSrc             = config.loadPage;
				loaded                = true;
            } else {
                td.className          = 'ly-tabpanel-tab';
                content.style.display = 'none';
				
				// 若初始化所有標籤，則加載iframe
				if (c.initAllTabs) {
					iframeSrc = config.loadPage;
					loaded    = true;
				}
            }
			
			td.style.width = (td.firstChild.clientWidth + (td.childNodes.length > 1 ? td.lastChild.clientWidth + 3 : 0)) + 'px';
			
			tr.lastChild.style.width = (tr.parentNode.parentNode.clientWidth - this.getWidth()) + 'px';
            
            // 修正td的colspan
			c.objList.spaceBar.firstChild.colSpan += 2;
			c.objList.content.firstChild.colSpan  += 2;
            
            // 添加内容
            c.objList.content.firstChild.appendChild(content);
            if (!!config.loadPage) {
                iframe = Ly.createElement('iframe', {
					// 高度值不可以在載入時重新計算。在初始化標籤時就要計算，因為content有padding值。
					// 若每次添加標籤時再計算高度會導致有3px的波動
                    style : 'width: 100%; height: ' + c.iframeHeight + 'px;border:0px;',
                    src   : config.preload ? config.loadPage : iframeSrc
                });
				iframe.frameBorder = 0;
				
                content.appendChild(iframe);
				Ly.setHeight(iframe, c.container, 31);
            } else {
                content.innerHTML = config.html;
            }
            
            c.tabs.push({
                tab     : td,                   // 標籤對象
				name    : config.name,          // 標籤名稱
                content : content,              // 內容,非框架方式加載時
                iframe  : iframe,               // 當前標籤所對應的IFRAME對象
                reload  : config.reload,        // 是否此標籤每次都加載
				preload : config.preload,       // 是否預載入
				loaded  : loaded,               // 是否已經加載
				path    : config.loadPage       // IFRAME要加載的頁面地址
            });
			// 給標籤添加附屬對象
			td.prototype = {
				name   : config.name,
				iframe : iframe,
				path   : config.loadPage
			};
            // 添加事件
            this.initTabPanelEvent(td, config);
            
            return td;
        },
        /**
         * 更新標籤項 
         */
        update : function(config) {
        },
        /**
         * 刪除標籤項
         * @param {Object} obj 要删除的标签对象
         */
        remove : function(obj) {
            var c    = _this.config,
				tabs = c.tabs,
				tr = c.objList.titleBar,
				width;
            
            // 如果只有一个标签,则不允许删除
            if (tabs.length == 1) {
                return;
            }
            for (var i = 0; i < tabs.length; i++) {
                if (tabs[i].tab === obj) {
					tr.lastChild.style.width = (tr.parentNode.parentNode.clientWidth - this.getWidth(2)) + 'px';
                    c.objList.content.firstChild.removeChild(tabs[i].content);
                    tr.removeChild(obj.previousSibling);
                    tr.removeChild(obj);
                    break;
                }
            }
            
            tabs.splice(i, 1);
            
            //若前面有标签,则切换至前面的标签,否则切换至后面的标签
            if (i > 0) {
                this.swapTabs(tabs[i - 1].tab);
            } else {
                this.swapTabs(tabs[i].tab);
            }
            
            return true;
        }
    };
};
Ly.TabPanel.prototype = {
    ver : '1.0a',
    /**
     * 添加一个标签页
     * @param {Object} config 要添加的标签配置信息
     * config = {
         name : '新标签',          // 标签名称
         html : '内容',            // 标签内加载的内容
         loadPage : 'new.html',    // 标签内加载的页面，与html互斥。
         position : 'last',        // 标签将要添加到的位置。first/last/before/after，默认last，若为before/after，则必须有reference
         reference : obj,          // 配合position使用。
         state : 'open',           // 新创建的标签状态，open/close，默认close
         reload : false,           // 切换标签时，是否重新加载，默认false
		 preload : false,          // 是否预加载，默认false
		 closeButton : false,      // 是否显示关闭按钮，默认false
		 closeTabHandler : function() {} // 关闭标签时执行的事件
         events : {                // 事件列表
             onclick : function(obj) {
             }
         }
     */
    add : function(config) {
		var html,loadPage;
        
        config = config || {};
        
        var h = typeof config.html;
        var l = typeof config.loadPage;
        
        if (h) { html = config.html; }
        if (l) { loadPage = config.loadPage; }
        if (h == 'undefined' && l == 'undefined') { html = ''; }
        
        return this.private.add({
            name            : config.name || '未命名',
            html            : html,
            loadPage        : loadPage,
            position        : config.position || 'last',
            reference       : config.reference,
			closeButton     : config.closeButton,
			closeTabHandler : config.closeTabHandler,
            state           : config.state || 'close',
            reload          : typeof config.reload == 'undefined' ? false : true,
			preload         : !!config.preload,
            events          : config.events
        });
    },
    modify : function(config) {
    },
    remove : function(obj) {
        this.private.remove(obj);
    },
    move : function(stab, dtab) {
    },
    copy : function(stab, dtab) {
    },
	/**
	 * 隱藏標籤
	 * @param {Object} tab 要隱藏的標籤
	 */
	hide : function(tab /* Object */) {
		tab.style.display = 'none';
		tab.previousSibling.style.display = 'none';
	},
	/**
	 * 顯示被隱藏的標籤
	 * @param {Object} tab 要顯示的標籤
	 */
	show : function(tab /* Object */) {
		tab.style.display                 = '';
		tab.previousSibling.style.display = '';
	},
	/**
	 * 切换标签
	 * @param {Object} tab 要切换的标签
	 */
	swapTabs : function(tab /* Object */) {
		this.private.swapTabs(tab);
	}
};